<script setup lang="ts">
import { tableConfig } from './config/table-config';
import { doGetPageUserInfo } from '@/api/setting/memberManagement';
import { doAddWorkshop } from '@/api/base/workshop/index';
import { message } from '@/components/q-message/message';
import useEmit from '@/hooks/useEmitter';
import usePageSave from '@/hooks/usePageSave';
import useRecordData from '@/hooks/useRecordData';
import { checkRepeat, RepeatMsg } from '@/utils';
import type { UserVO } from '@/api/setting/memberManagement/model/type';

const { modalSlotRef, loading, modalOk } = useModal();

const STORE_KEY = 'workshopAddData'; // store数据的key
const { startRecording, isUpdate } = useEmit(STORE_KEY); // 页面标签路由关闭二次确认事件监听 EventBus

useRecordData(modalSlotRef, STORE_KEY, isUpdate, startRecording); // 处理复制数据

defineOptions({
    name: 'WorkshopAdd'
});

const emit = defineEmits(['close']);

/**
 * @: 新增
 */
const handleSubmit = async () => {
    const value = modalSlotRef.value?.getSaveData();
    const data = value.map((item: any) => {
        const { workshopCode, workshopName, workshopLeader, state } = item;
        return {
            userId: workshopLeader.id,
            state,
            workshopCode,
            workshopName
        };
    });
    const msg = checkRepeat(data, ['workshopCode']);

    if (msg) {
        const { value, line } = msg;
        RepeatMsg({ value, line, label: '车间编码' });
        return;
    }

    try {
        const res = await doAddWorkshop(data);
        if (res) {
            message.success('新增成功！');
            emit('close');
        }
        return res;
    } catch (error) {
        console.log(error);
    }
};

/**
 * @: 用户名称
 */
const selectLoading = ref(false);
const customerOption = ref<UserVO[]>([]);
const customerRemoteMethod = async (query: string) => {
    selectLoading.value = true;
    try {
        const { data } = await doGetPageUserInfo({ userNameAndJobNumber: query, size: 100 }, 1);
        if (data?.records) {
            customerOption.value = data.records;
        }
    } catch (error) {
        console.log('-------', error);
    }
    selectLoading.value = false;
};

/**
 * 点击保存按钮
 */
const handleOk = async () => {
    try {
        await modalOk(handleSubmit);
        usePageSave('/WorkShop');
    } catch (e) {
        console.log(e);
    }
};

onBeforeMount(() => {
    customerRemoteMethod('');
});
</script>

<template>
    <q-page>
        <base-table
            ref="modalSlotRef"
            :table-config="tableConfig"
            open-sticky
            add-table-row
            :show-fullscreen="true"
        >
            <!-- 保存/取消 -->
            <template #tableHeadEnd>
                <q-submit-button
                    size="default"
                    :hide-label="true"
                    align="right"
                    :horizontal="true"
                    :loading="loading"
                    :cancel-button="false"
                    @save="handleOk"
                />
            </template>

            <template #workshopLeader="{ row }">
                <el-select
                    v-model="row.workshopLeader"
                    filterable
                    remote
                    :selectLoading="selectLoading"
                    reserve-keyword
                    :remote-method="customerRemoteMethod"
                    value-key="id"
                    popper-class="push-select"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in customerOption"
                        :key="item.id"
                        :label="item.username + ' - ' + item.jobNumber"
                        :value="item"
                    />
                </el-select>
            </template>
            <template #contactNumber="{ row }">
                <el-input :model-value="row.workshopLeader?.phone" disabled placeholder="请输入" />
            </template>
        </base-table>
    </q-page>
</template>

<style scoped lang="scss"></style>
@/hooks/useRecordData
